<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<title>Document</title>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#btn1").click(function(){
				$("#test1").text(function(i,origText){
					return "Old text：" + origText + "New text：Hello world!(index： "+ i +" )";
				});
			});
			$("#btn2").click(function(){
				$("#test2").html(function(i,origText){
					return"Old text：" + origText + "New html：Hello <b>world!</b> (index：" + i + ")";
				});
			});

            $("#btn3").click(function(){
            	$("#mls").val("Dolly Duck");
            });

            $("#btn4").click(function(){
            	$("#w3s").attr("href",function(i,origValue){
            		return origValue + "/jquery";
            	});
            });

            $("#btn5").click(function(){
            	$("#test3").append("<b>Appended text</b>.");
            	$("#test4").prepend("<b>Prepended text</b>. ");

            });
            $("#btn6").click(function(){
            	$("ol").append("<li>Appended item</li>")
            });

            $("#btn7").click(function(){
            	$("img").before("<b>Before</b>");
            });

            $("#btn8").click(function(){
            	$("#div1").remove();
            });

            $("#btn9").click(function(){
            	$("#div1").empty();
            });
            $("#btn10").click(function(){
            	$("p").remove(".italic");
            });

            $("#btn11").click(function(){
            	$("h1,h2,#test5,#test6").addClass("blue");
            	$("#div2").addClass("important blue");
            });

            $("#btn12").click(function(){
            	$("h1,h2,#test5,#test6").removeClass("blue");
            });

            $("#btn13").click(function(){
            	$("h1,h2,#test5,#test6").toggleClass("blue");
            });

            $("#btn14").click(function(){
            	alert("Background color = " + $("#test5").css("background-color"));
            });

            $("#btn15").click(function(){
            	$("#test6").css({"background-color":"yellow","font-size":"200%"});
            });

            $("#btn16").click(function(){
            	var txt="";
            	txt+="Width of div: " + $("#div3").width() + "<br>";
            	txt+="Height of div: " + $("#div3").height() + "<br>";
            	txt+="Inner width of idv: " + $("#div3").innerWidth() + "<br>";
            	txt+="Inner height of div: " + $("#div3").innerHeight() + "<br>";
            	txt+="Outer width: " + $("#div3").outerWidth() + "<br>";
            	txt+="Outer height: " + $("#div3").outerHeight() + "<br>";
            	txt+="Outer width of div (margin included): " + $("#div3").outerWidth(true) + "<br>";
            	txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true) + "<br>";
            	$("#div3").html(txt);
            });

            $("#btn17").click(function(){
            	var txt3="";
            	txt3+="Document width/height: " + $(document).width();
            	txt3+="x" + $(document).height() + "\n";
            	txt3+="Window width/height: " + $(window).width();
            	txt3+="x" + $(window).height();
            	alert(txt3);
            });

            $("#btn18").click(function(){
            	$("#div3").width(320).height(320);
            });
		});

		function appendText(){
			var txt1="<p>Text.</p>";
			var txt2=$("<p></p>").text("Text.");
			var txt3=document.createElement("p");
			txt3.innerHTML="Text.";
			$("body").append(txt1,txt2,txt3);
		}

		function afterText(){
			var txt1="<b>I </b>";
			var txt2=$("<i></i>").text("love ");
			var txt3=document.createElement("big");
			txt3.innerHTML="jQuery!";
			$("img").after(txt1,txt2,txt3);
		}
	</script>
</head>
<body>
	<p id="test1">这是<b>粗体</b>文本。</p>
	<p id="test2">这是另一段<b>粗体</b>文本。</p>
	<button id="btn1">显示旧/新文本</button>
    <button id="btn2">显示旧/新 HTML</button>

    <p>姓名：<input id="mls" type="text" name="" value="米老鼠"></p>
    <button id="btn3">设置值</button>

    <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
    <button id="btn4">改变 href 值</button>
    <P>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</P>

    <p id="test3">This is a paragraph.</p>
    <p id="test4">This is another paragraph.</p>
    <ol>
    	<li>List item 1</li>
    	<li>List item 2</li>
    	<li>List item 3</li>
    </ol>
    <button id="btn5">追加文本</button>
    <button id="btn6">追加列表项</button>

    <p>This is a paragraph.</p>
    <button onclick="appendText()">追加文本</button>
    <br>
    <br>

    <img src="images/eg_w3school.gif" alt="W3School Logo" />
    <br>
    <br>
    <button id="btn7">在图片前面添加文本</button>
    <button onclick="afterText()">在图片后面添加文本</button>
    <br>
    <br>

    <div id="div1" style="height:140px;width:300px;border:1px solid black;background-color:yellow;">This is some text in the div.
        <p>This is a paragraph in the div.</p>
        <p class="italic">This is a paragraph in the div.</p>
        <p class="italic">This is another paragraph in the div.</p>
    </div>

    <br>
    <button id="btn8">删除 div 元素</button>
    <button id="btn9">清空 div 元素</button>
    <button id="btn10">删除 class="italic" 的所有 p 元素</button>
    <br>
    <br>

    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p id="test5" style="background-color:#ff0000">这是一个段落。</p>
    <p id="test6" style="background-color:#00ff00">这是另一个段落。</p>
    <div id="div2">这是非常重要的文本！</div>
    <br>
    <button id="btn11">向元素添加类</button>
    <button id="btn12">从元素上删除类</button>
    <button id="btn13">切换 CSS 类</button>
    <button id="btn14">返回 test5 元素的背景色</button>
    <button id="btn15">为 test6 元素设置多个样式</button>
    <br>
    <br>

    <div id="div3" style="height:200px;width:400px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button id="btn16">显示 div 的尺寸</button>
    <button id="btn18">调整 div 的尺寸</button>
    <p>width() - 返回元素的宽度。</p>
    <p>height() - 返回元素的高度。</p>
    <p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
    <p>innerHeight() - 返回元素的高度（包括内边距）。</p>
    <p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
    <p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
    <p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
    <p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
    <br>

    <button id="btn17">显示文档和窗口的尺寸</button>


</body>
</html>